<template>
    <div class="workspace">
        <div class="header">
            <el-button @click="cancelAction">取消</el-button>
            <el-button type="primary" @click="saveAction">保存</el-button>
        </div>
        <div class="stancilContainerWrapper" >
            <div id="stancilContainer" class="stancil">left</div>
        </div>
        <div style="width:100%; height:100%; overflow: scroll; display: flex; flex-direction: column;">
            <div id="center" @click="centerGraph">
                <svg t="1672242138641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2693"><path d="M874.048 533.333333C863.424 716.629333 716.629333 863.424 533.333333 874.048V917.333333a21.333333 21.333333 0 0 1-42.666666 0v-43.285333C307.370667 863.424 160.576 716.629333 149.952 533.333333H106.666667a21.333333 21.333333 0 0 1 0-42.666666h43.285333C160.576 307.370667 307.370667 160.576 490.666667 149.952V106.666667a21.333333 21.333333 0 0 1 42.666666 0v43.285333c183.296 10.624 330.090667 157.418667 340.714667 340.714667h42.816a21.333333 21.333333 0 1 1 0 42.666666H874.026667z m-42.752 0h-127.786667a21.333333 21.333333 0 0 1 0-42.666666h127.786667C820.778667 330.922667 693.056 203.221333 533.333333 192.704V320a21.333333 21.333333 0 0 1-42.666666 0V192.704C330.922667 203.221333 203.221333 330.944 192.704 490.666667H320a21.333333 21.333333 0 0 1 0 42.666666H192.704c10.517333 159.744 138.24 287.445333 297.962667 297.962667V704a21.333333 21.333333 0 0 1 42.666666 0v127.296c159.744-10.517333 287.445333-138.24 297.962667-297.962667zM512 554.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z" p-id="2694"></path></svg>
            </div>
            <div id="workflowContainer" class="graph">right</div>
            <el-drawer class="panel-drawer" size="300" v-model="showPanel" direction="rtl" :destroy-on-close="true" :with-header="false" :before-close="handleClosePanel" :show-close="false" :close-on-click-modal="false">
                <panel-manager-vue v-model:node="selectedNode"></panel-manager-vue>
            </el-drawer>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type { Events, Node } from "@antv/x6";
import X6Stencil from './Stencil/index'
import X6FlowDesign from './FlowDesign/index'
import { Export } from "@antv/x6-plugin-export";
import { ElMessageBox } from 'element-plus'
import PanelManagerVue from './FlowDesign/Panel/PanelManager.vue';
import {EventBus} from './Utils/EventBus'

const showPanel = ref(false);
var selectedNode:Node | null;
const props = defineProps({
    handleCancel: Function,
    handleSave: Function,
    data: Object
})
let flowCtrl: X6FlowDesign;

watch(()=> props.data,() => {
    console.log('[X6WorkSpace]props.data change', props.data);

    flowCtrl.graph.fromJSON(props.data!);
},{
    immediate:false
});

onMounted(() => {
    flowCtrl = new X6FlowDesign();
    new X6Stencil(flowCtrl.graph);

    flowCtrl.graph.on("node:click", ({ node }) => {
        console.log("node:click 打开属性抽屉面板", node);
        showPanel.value = true;
        selectedNode = node;
    });

    EventBus.on('closeDrawer', ()=>{
        showPanel.value = false;
        selectedNode = null;
    })

    EventBus.on('removeNode', (node:any)=>{
        flowCtrl.graph.removeNode(node);
        showPanel.value = false;
        selectedNode = null;
    })
})

const handleClosePanel = (done: () => void) => {
    ElMessageBox.confirm('确定要关闭? ')
    .then(() => {
        showPanel.value = false;
        selectedNode = null;
    }).catch(() => {
    })
}

const saveAction = ()=>{
    console.log('saveAction');
    var data = flowCtrl.graph.toJSON();
    if(props.handleSave){
        props.handleSave(data);
    }
    // flowCtrl.save();
}

const cancelAction = () => {
    if(props.handleCancel){
        props.handleCancel();
    }
}

const importAction = ()=>{
    console.log('importAction');
    document.getElementById("importfile")?.click();
}
const onFileChange = async (event:Event)=>{
    const target = event.target as HTMLInputElement;
    let files = target.files;
    console.log(files);
    if(files && files.length>0) {
        let jsonFile = files[0];
        let jsonObj = JSON.parse(await jsonFile.text());
        flowCtrl.graph.fromJSON(jsonObj);
    }
}

const exportAction = ()=>{
    console.log('exportAction');
    var data = flowCtrl.graph.toJSON();
    let timestamp = new Date().getTime()
    var fileName = `export-${timestamp}.json`;
    // Create a blob of the data
    var fileToSave = new Blob([JSON.stringify(data, null, 2)], {
        type: 'application/json'
    });

    const a = document.createElement('a');
    a.href = URL.createObjectURL(fileToSave);
    a.download = fileName;
    a.click();
}

const exportPNG = ()=>{
    flowCtrl.graph.use(new Export());
    let timestamp = new Date().getTime()
    var fileName = `export-${timestamp}.png`;
    flowCtrl.graph.exportPNG(fileName, {padding: 50})
}

const centerGraph = ()=>{
    console.log('centerGraph')
    flowCtrl.graph.zoomTo(1);
    flowCtrl.graph.centerContent(); // 将画布中元素居中展示
}

</script>


<style scoped>

.workspace {
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
}


.stancil {
    width: 200px;
    background-color: antiquewhite;
}

.header {
    height: 40px; 
    /* background-color: antiquewhite; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: right;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    right: 0px;
    z-index: 999;
    align-items: center;
    padding-right: 5px;
}
.title {
    line-height: 40px;
    color: black;
}
.operations-left{
    display: flex;
    flex-direction: row;
    width: 200px;
    height: 100%;
    position:absolute;
    left: 10px;
    justify-content: left;
    cursor: pointer;
}
.operations-left >div {
    height: 100%;
    color: black;
    line-height: 40px;
    font-size: 18px;
}

.operations-right {
    display: flex;
    flex-direction: row;
    width: 200px;
    height: 100%;
    position:absolute;
    right: 10px;
    justify-content: right;
    cursor: pointer;
}
.operations-right >div {
    height: 100%;
    color: black;
    line-height: 40px;
    font-size: 18px;
}

#center {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 20px;
    right: 10px;
    cursor: pointer;
    z-index: 888;
    color: #333;
}

</style>

<!-- 由于drawer是在body中. style不能是scope -->
<style>
.panel-drawer .el-drawer__body{
    padding: 0px !important;
}
</style>
  